<template>
  <ElRow>
    <ElCol :span="12" :push="6">
      <div class="logo">
        <img style="
            display: block;
            margin: 16px auto;
            max-width: 30vw;
            max-height: 30vh;
            border-radius: 8px;
          " src="../assets/logo.jpg" alt="" />
      </div>
      <ElCard>
        <ElForm label-width="80px">
          <ElFormItem label="用户名">
            <ElInput placeholder="请输入用户名" v-model="userName" class="w-50 m-2" size="large"></ElInput>
          </ElFormItem>
          <ElFormItem label="密码">
            <ElInput placeholder="请输入密码" type="password" v-model="password" size="large"></ElInput>
          </ElFormItem>
          <ElFormItem>
            <ElButton type="primary" @click="toHome">登录</ElButton>
          </ElFormItem>
        </ElForm>
      </ElCard>
    </ElCol>
  </ElRow>
</template>
<script setup>
import { ElMessage } from "element-plus";
import { ref } from "vue";
import { useRouter } from "vue-router";
import { loginApi } from "../api/require";
const router = useRouter();

const userName = ref("");
const password = ref("");
const toHome = () => {
  if (!userName.value || !password.value) {
    alert("输入不能为空！");
  } else {
    loginApi(userName.value, password.value).then((res) => {
      //console.log(res.data);
      if (res.data.code == 1) {
        sessionStorage.setItem("token", res.data.data);
        ElMessage.success("登陆成功");
        setTimeout(() => {
          router.push({ name: "First" });
        }, 2000);
      } else {
        ElMessage.error(res.data.data);
      }
    });
  }
    /* import { ref } from 'vue';
    import { useRouter } from 'vue-router';
    import { loginApi } from '../api/require'
    const router = useRouter();
    const userName = ref('');
    const password = ref('');
    const toHome = () => {
      if (!userName.value || !password.value) {
        alert('输入不能为空！')
      } else {
        loginApi(userName.value, password.value).then(
          res => {
            //console.log(res.data);
            if (res.data.code == 1) {
              sessionStorage.setItem('token', res.data.data);
              router.push({ name: 'First' })
            }
          }
        )
      }
    } */
  };
</script>
<style scoped lang="scss">

</style>
